<template>
	<view class="shangjia box" v-if="shangjiatui">
	  <view v-for="item in shangjiatui" :key="item.id" :class="{on: shangForm.type_id === item.id}" class="s-box">
	    <view class="tops a11" @click="shangForm.type_id = item.id; shangForm.child_type_id = 0"  v-if="shangForm.type_id !== item.id">
	      <view class="t-name">{{item.name}}</view>
	      <view class="p1" v-if="item.id === 0">00:01~23:59 期间未开门，申请全额退款</view>
	      <view class="p1" v-if="item.id === 1">寄存点出现以下任一问题，申请全额退款</view>
	    </view>
	    <view class="tops" v-else>
	      <view class="t-name">{{item.name}}</view>
	      <view class="p1" v-if="item.id === 0">00:01~23:59 期间未开门，申请全额退款</view>
	      <view class="p1" v-if="item.id === 1">寄存点出现以下任一问题，申请全额退款</view>
	    </view>
	    <view v-for="(items,index) in item.child" :key="index" v-if="shangForm.type_id === item.id" class="radio-box">
	      <view class="name" @click="shangForm.child_type_id = index" :class="{on:shangForm.child_type_id == index && shangForm.type_id === item.id}">{{items}}</view>
	      <template v-if="index === 0 && shangForm.type_id === 0">
	        <v-upload @getImages="getShangImage"></v-upload>
	        <view class="p3">"上传照片，或填写到店时间</view>
	        <input type="text" placeholder="请填写到店时间，如: 8点30分" v-model="shangForm.times" class="clallTime">
	      </template>
	    </view>
	  </view>
    <view class="btn" @click="refund()">确定</view>
	</view>
</template>

<script>
	// 价格 = 背包单价 * 数量 * 天数 + 行李箱单价 * 数量 * 天数
	// 价格 = 天数 * (背包单价 * 数量 + 行李箱单价 * 数量)、
  import upload from '@/components/upload.vue';
  export default {
    components: {
      'v-upload':upload
    },
		data() {
			return {
				id: '',
				shangjiatui:[],
        shangForm:{
          orders_id:'', //订单id
          type_id:'', //退款类型
          child_type_id:0, //退款类型子集
          times:'',
          image:[],
        },
        
        
        
        tuiData:null,
        refund_reason:'',
        yuanyList:{}
			}
		},
		onLoad(e) {
      this.id = e.id;
      this.$http.get(this.$api.storeRefundDescApi,{}).then(res=>{
        console.log('resd=',res.data[0].child[0])
        this.shangjiatui = res.data;
      })
			getApp().get_loading();
			// this.getOrdersDetail();
      
		},
		onShow() {
			
			
		},
		onLaunch() {
      
		},
		methods: {
      getShangImage(e){
        console.log('https://wubaoyou.cn',e)
        this.shangForm.image = this.shangForm.image.concat(e);
      },
      
      
      refund(){
        const data = JSON.parse(JSON.stringify(this.shangForm));
        if(data.type_id === '') return getApp().get_msg('请选择取消原因类型');
        if(data.type_id === 0 && data.child_type_id === 0 && data.image.length === 0 && data.times.length === 0) return getApp().get_msg('请上传图片或填写到店时间');
        console.log('data=========>',data)
        uni.showModal({
          title:"提示",
          content:"确定要取消该订单吗？",
          success: (e) => {
            if(e.confirm){
              uni.showLoading()
              this.get_refund()
            }
          }
        })
      },
      get_refund(){
        const data = JSON.parse(JSON.stringify(this.shangForm));
        console.log('data=================>',data)
        if(data.type_id === 1 || data.type_id === 0 && data.child_type_id === 1){
          data.image='';
          data.times = '';
          this.shangForm.image = [];
          this.shangForm.times = ''
        }
        if(this.shangForm.image.length > 0){
          let image = [];
          this.shangForm.image.forEach(m=>{
            if(!image.find(n=> n === m.url)){
              image = image.concat(m.url) 
            }
          })
          console.log('data.imagedata.imagedata.image',image)
          data.image = image.join(',')
        }
        console.log('shangForm=======>data',data);
        this.$http.post(this.$api.storeRefundApi, data).then(res=>{
          uni.showToast({
            title:"提交申请成功~",
            icon:'none'
          })
          this.tuiShow = false;
          this.detail_info.status = 7;
          uni.setStorageSync('upOrder',1)
        })
      }
     
		}
	}
</script>

<style lang="less">
	.box{padding: 20rpx 30rpx; box-sizing: border-box;}
  view{box-sizing: border-box;}
  .btn{background-color: #FF6A00; color: #fff; display: flex; align-items: center; justify-content: center; border-radius: 6rpx; margin-top: 20rpx; height: 70rpx; font-size: 28rpx; margin-top: 40rpx;}
  
  .shangjia{
    max-height: 60vh;
    view{font-size: 26rpx;}
    .t-name{margin-bottom:10rpx;  font-size: 28rpx; font-weight: bold;}
    .p1{color: #666; margin-bottom: 10rpx;}
    .p3{color: red; margin-top: 20rpx;}
    .clallTime{width: 100%; height: 80rpx; background-color: #f5f5f5; border-radius: 4px; padding: 0 10rpx; margin-top: 16rpx; box-sizing: border-box;}
    .name{
      display: flex; align-items: center; margin-bottom: 10rpx; padding: 10rpx 0;
      &::before{content: ''; display: block; width: 30rpx; height: 30rpx; border-radius: 50%; border: 2px solid #ddd; box-sizing: border-box; margin-right: 8rpx;}
      &.on::before{border-color: #ff5656; border-width: 8rpx}
    }
    .radio-box{padding: 0 20rpx;}
    .s-box{
      .tops{ padding: 20rpx 20rpx;}
      background-color: #f9f9f9; border-radius: 10rpx; border: 1px solid #ddd; margin-bottom: 20rpx;
      &.on{border-color: #FF6A00; background-color: rgba(255,0,0, 0.02);}
    }
  }
</style>
